<template>
    <div>
        <div class="small-img-wrap">
            <div
                class="small-img"
                v-for="(item, index) in smallImg"
                :key="index"
                @click="showPic(index)">
                <img :src="item">
            </div>
        </div>
        <div class="big-img-wrap" v-show="is_show">
            <div class="wrap-mask"></div>
            <div class="close-icon" @click="closed">
                <i class="el-icon-circle-close"></i>
            </div>
            <div class="arr-icon left" @click="changeImg(-1)" v-if="bigImg.length > 1">
                <i class="el-icon-arrow-left"></i>
            </div>
            <div class="arr-icon right" @click="changeImg(1)" v-if="bigImg.length > 1">
                <i class="el-icon-arrow-right"></i>
            </div>
            <div class="img-container">
                <template v-for="(item, index) in bigImg">
                    <img
                        v-if="current_index == index"
                        :key="index"
                        :src="item"
                    />
                </template>
                <el-button  size="small" class="download-btn" @click="downLoad">下载图片</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            is_show: false,
            current_index: 0,
            small_img: this.smallImg,
            big_img: this.bigImg,
            baseUrl: global.baseurl,
        }
    },

    props: {
        smallImg: {
            type: Array,
            default: () => []
        },
        bigImg: {
            type: Array,
            default: () => []
        }
    },

    watch: {
        is_show(val){
            if (val) {
                document.body.style.overflow = 'hidden'
            } else {
                document.body.style.overflow = 'auto'
            }
        },
        small_img: {
            handler: function(val) {
            },
            immediate: true,
            deep: true
        },
        bigImg: {
            handler: function(val) {
            },
            immediate: true,
            deep: true
        }
    },

    methods: {
        showPic(index) {
            this.is_show = true
            this.current_index = index
        },
        closed() {
            this.is_show = false
        },
        changeImg(val) {
            let next = this.current_index + val
            if (next >= this.bigImg.length) {
                next = 0
            }
            if (next < 0) {
                next = this.bigImg.length - 1
            }
            this.current_index = next
        },
        downLoad() {
            let current_img = this.bigImg[this.current_index].split(this.baseUrl+'/storage/upload/')[1],
                img_arr = current_img.split('/'),
                path = img_arr[img_arr.length - 1],
                file = img_arr.slice(0, 2).join("/");
            let a = document.createElement('a')
            a.download = path
            a.href = `${this.baseUrl}/api/download?path=${file}/${path}`
            a.click()
        }
    }
}
</script>

<style lang="less" scoped>
.small-img-wrap {
    .small-img {
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
}
.big-img-wrap {
    user-select: none;
    z-index: 2000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    .wrap-mask {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: .5;
        background: #000;
    }
    .close-icon {
        cursor: pointer;
        position: absolute;
        color: #fff;
        top: 40px;
        right: 40px;
        width: 40px;
        height: 40px;
        font-size: 40px;
        z-index: 200;
    }
    .arr-icon {
        top: 50%;
        width: 44px;
        height: 44px;
        font-size: 24px;
        color: #fff;
        background-color: #606266;
        border-color: #fff;
        transform: translateY(-50%);
        position: absolute;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 200;
        &.left {
            left: 40px;
        }
        &.right {
            right: 40px;
        }
    }
    .img-container {
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        align-items: center;
        position: relative;
        img {
            transform: scale(0.94) rotate(0deg);
            margin-left: 0px;
            margin-top: 0px;
            max-height: calc(100% - 50px);
            max-width: 100%;
        }
        .download-btn {
            position: absolute;
            bottom: 5px;
            z-index: 99;
            left: 50%;
            transform: translateX(-50%)
        }
    }
}
</style>